<template>
	<view class="search">
		<view class="searchBG"></view>
		<view class="searchCon p30">
			<view class="searchConInp dis">
				<view class="searchConInpL dis">
					<view class="sCinput">
						<input v-model="searchVal" search @blur="inputBlur" type="text" placeholder="请输入关键字" />
					</view>
					<view class="sCicon" @click="searchClick">
						<image src="/post/static/4.png" mode=""></image>
					</view>
				</view>
				<view class="searchConInpR" @click="goBack">返回</view>
			</view>
			<view class="sHistory">
				<view class="sHistoryT dis">
					<view class="sHTL">历史搜索</view>
					<view class="sHTR" @click="clearHistoryList">
						<up-icon name="trash"></up-icon>
					</view>
				</view>
				<view class="sHistoryList p20 dis">
					<view class="sHistoryItem" v-for="item in historyList" :key="item" @click="clickHistoryItem(item)">{{ item }}</view>
				</view>
			</view>
			<view class="searchBody">
				<view class="noData" v-if="searchList.length <= 0 && !isGetData">
					<!-- 热榜 -->
					<view class="hotList">
						<view class="hotListTit">
							<image src="/post/static/2.png" mode=""></image>
						</view>
						<view class="hotListDom">
							<view class="hotListItem dis" v-for="(item, index) in hotList" :key="item.id" @click="clickPost(item)">
								<view class="hLIL dis ellipsis">
									<view class="hLILN" :class="[`color${index}`]">{{ index + 1 }}</view>
									<view class="hLILV ellipsis">{{ item.title }}</view>
								</view>
								<view class="hLIR">{{ item.views }}</view>
							</view>
						</view>
					</view>
					<!-- 跨校热榜 -->
					<view class="hotList">
						<view class="hotListTit">
							<image src="/post/static/3.png" mode=""></image>
						</view>
						<view class="hotListDom">
							<view class="hotListItem dis" v-for="(item, index) in crossSchool" :key="item.id" @click="clickPost(item)">
								<view class="hLIL dis ellipsis">
									<view class="hLILN" :class="[`colorK${index}`]">{{ index + 1 }}</view>
									<view class="hLILV ellipsis">{{ item.title }}</view>
								</view>
								<view class="hLIR">{{ item.views }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 搜索结果 -->
				<view class="postList" v-if="searchList.length > 0">
					<view class="postItem" v-for="item in searchList" :key="item.id" @click="clickPost(item)">
						<view class="postItemUser dis">
							<view class="PIUL dis">
								<view class="PIULT">
									<image :src="item.author.avatar" mode="aspectFill"></image>
								</view>
								<view class="PIULN">{{ item.author.nickname }}</view>
								<view class="PIULLV">{{ item.LVNum }}</view>
							</view>
							<view class="PIUR">{{ item.createTime }}</view>
						</view>
						<view class="postItemConT dis">
							<text v-if="item.title" class="posCon">{{ item.title }}</text>
							<view v-else class="posConS"></view>
						</view>
						<view class="postItemConC">
							<text class="postItemConCV">{{ item.content }}</text>
						</view>
						<view class="postItemImg dis">
							<view class="postItemImgD" v-for="(ele, index) in item.imageUrls" :key="index">
								<image :src="ele" mode="aspectFill"></image>
							</view>
						</view>
						<view class="postItembot dis">
							<view class="pIBL dis">
								<view class="pIBL1">{{ item.plateName }}</view>
								<view class="pIBL2">{{ item.viewNum }}人围观</view>
							</view>
							<view class="pIBR dis">
								<view class="pIBR1 dis" @click.stop="likePostFun(item)">
									<view class="pIBR11">
										<image src="/pages/static/5.png" mode=""></image>
									</view>
									<view class="pIBR12">{{ item.likeNum }}</view>
								</view>
								<view class="pIBR1 dis">
									<view class="pIBR11">
										<image src="/pages/static/6.png" mode=""></image>
									</view>
									<view class="pIBR12">{{ item.postNum }}</view>
								</view>
								<view class="pIBR2">
									<image src="/pages/static/7.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="skeleton" v-if="searchList.length < total">
						<up-skeleton rows="3" title loading></up-skeleton>
					</view>
					<view class="noDatas p20" v-else>没有更多内容了，亲~</view>
				</view>
				<view class="noMoerData" v-if="searchList.length <= 0 && isGetData">没有更多内容了，亲</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { hotPost, getThreadSearch, likePost, statisticsWebsitePVandUV } from '@/config/api.js';
import { indexPostList1, indexPostList2 } from '@/config/axiosData.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
import { dealWithData } from '@/util/util.js';
const schoolInfo = ref({});
onLoad(() => {
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
	}
	crossSchoolFun();
	hotPostFun();
	statisticsWebsitePVandUV();
});
onShow(() => {
	historyList.value = uni.getStorageSync('historyList') || [];
});
// 跨校热点
const crossSchool = ref([]);
const crossSchoolFun = async () => {
	const res = await hotPost();
	const newList = res.data.list.map((item) => {
		return {
			...item,
			title: item.content,
			views: item.postNum
		};
	});
	if (res.code == 0) {
		crossSchool.value = newList;
	}
};
// 热点
const hotList = ref([]);
// 查询热门帖子
const hotPostFun = async () => {
	const res = await hotPost({ departmentId: schoolInfo.value.schoolId });
	// console.log(res)
	const newList = res.data.list.map((item) => {
		return {
			...item,
			title: item.content,
			views: item.postNum
		};
	});
	if (res.code == 0) {
		hotList.value = newList;
	}
};

// 历史
const searchVal = ref('');
const historyList = ref([]);
const searchClick = () => {
	pageNum.value = 1;
	searchList.value = [];
	const value = searchVal.value;
	saveLocally(value);
	getSearchList(value);
};
const inputBlur = () => {
	// if (searchVal.value == '') {
	// 	isGetData.value = false
	// }
};
// 保存本地
const saveLocally = (val) => {
	if (!val) return;
	const value = val;
	const index = historyList.value.indexOf(value);
	if (index !== -1) {
		historyList.value.splice(index, 1);
	}
	historyList.value.unshift(value);
	if (historyList.value.length > 20) {
		historyList.value.splice(20);
	}
	uni.setStorageSync('historyList', historyList.value);
};
// 点击搜索历史
const clickHistoryItem = (val) => {
	pageNum.value = 1;
	searchList.value = [];
	searchVal.value = val;
	saveLocally(val);
	getSearchList(val);
};
// 清空本地历史
const clearHistoryList = () => {
	historyList.value = [];
	uni.setStorageSync('historyList', historyList.value);
};

// 搜索列表
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const request = ref(true);
const searchList = ref([]);
const isGetData = ref(false);
const getSearchList = async (val) => {
	if (val) {
		isGetData.value = true;
	} else {
		isGetData.value = false;
		return;
	}
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		departmentId: schoolInfo.value.schoolId,
		keyword: val
	};
	const res = await getThreadSearch(data);
	if (res.code == 0) {
		total.value = res.data.pageInfo.total;
		searchList.value = [...searchList.value, ...dealWithData(res.data.pageInfo.list)];
		request.value = false;
	}
};
// 点击帖子
const clickPost = (item) => {
	uni.navigateTo({
		url: `/post/post/postDetails?id=${item.id}`
	});
};
// 帖子点赞
const likePostFun = async (item) => {
	let action = 1;
	if (item.isLiked == 1) {
		// 取消点赞
		action = 2;
	} else {
		// 点赞
		action = 1;
	}
	const res = await likePost(item.id, { action });
	if (res.code == 0) {
		searchList.value.forEach((ele) => {
			if (ele.id == item.id) {
				ele.isLiked = ele.isLiked == 1 ? 0 : 1;
				ele.likeNum = action == 1 ? ele.likeNum + 1 : ele.likeNum - 1;
			}
		});
	}
};
onReachBottom(() => {
	if (searchList.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getSearchList(searchVal.value);
	}
});

// 返回
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uview-plus/theme.scss';
.search {
	position: relative;
	width: 100%;
	z-index: 1;
	.searchBG {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(180deg, #8dadfa 0%, rgba(169, 175, 248, 0) 100%);
		z-index: 0;
	}
	.searchCon {
		position: relative;
		z-index: 2;
		font-family: PingFang SC, PingFang SC;
		font-style: normal;
		text-transform: none;
		.searchConInp {
			justify-content: space-between;
			align-items: center;
			.searchConInpL {
				justify-content: space-between;
				align-items: center;
				width: 550rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 64rpx;
				overflow: hidden;
				.sCinput {
					flex: 1;
					padding-left: 30rpx;
					height: 100%;
					line-height: 75rpx;
					input {
						display: block;
						width: 100%;
						height: 100%;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
					}
				}
				.sCicon {
					position: relative;
					width: 96rpx;
					height: 100%;
					image {
						position: absolute;
						top: 16rpx;
						right: 24rpx;
						display: block;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
			.searchConInpR {
				width: 120rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #ffffff;
				border-radius: 138rpx;
				font-size: 24rpx;
				color: #666666;
				text-align: center;
			}
		}
		.sHistory {
			padding-top: 30rpx;
			.sHistoryT {
				justify-content: space-between;
				align-items: center;
				.sHTL {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.sHistoryList {
				flex-wrap: wrap;
				width: 100%;
				height: 100rpx;
				overflow: hidden;
				.sHistoryItem {
					margin-bottom: 10rpx;
					padding: 0 10rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
		.searchBody {
			padding-top: 20rpx;
			.noData {
				.hotListTit {
					image {
						width: 170rpx;
						height: 42rpx;
					}
				}
				.hotListDom {
					padding-top: 10rpx;
					.hotListItem {
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;
						height: 34rpx;
						line-height: 34rpx;
						.hLIL {
							.hLILN {
								margin-right: 14rpx;
								font-weight: bold;
								font-size: 24rpx;
								color: #999;
							}
							.hLILV {
								font-size: 24rpx;
								color: #222222;
							}
							.color0 {
								color: #eb545e;
							}
							.color1 {
								color: #ff744d;
							}
							.color2 {
								color: #fbab55;
							}
							.colorK0 {
								color: #557bfb;
							}
							.colorK1 {
								color: #557bfb;
							}
							.colorK2 {
								color: #557bfb;
							}
						}
						.hLIR {
							padding-left: 50rpx;
							padding-right: 10rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
			.postList {
				padding-top: 10rpx;
				.postItem {
					padding: 20rpx 0;
					border-bottom: 2rpx solid #f4f4f4;
					.postItemUser {
						justify-content: space-between;
						align-items: center;
						.PIUL {
							align-items: center;
							.PIULT {
								margin-right: 16rpx;
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								overflow: hidden;
								background-color: #6f7d8c;
								image {
									width: 100%;
									height: 100%;
								}
							}
							.PIULN {
								margin-right: 20rpx;
								font-weight: 500;
								font-size: 24rpx;
								color: #666666;
							}
							.PIULLV {
								margin-top: 15rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #999999;
							}
						}
						.PIUR {
							font-size: 24rpx;
							color: #999999;
						}
					}
					.postItemConT {
						position: relative;
						padding-top: 20rpx;
						.posType {
							position: absolute;
							top: 20rpx;
							left: 0;
							.postTypeI {
								margin-right: 15rpx;
								width: 58rpx;
								height: 32rpx;
							}
							.postTypeH {
								width: 36rpx;
								height: 36rpx;
							}
						}
						.posCon {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 700;
							font-size: 28rpx;
							color: #222222;
						}
						.posConS {
							width: 100%;
							height: 45rpx;
						}
					}
					.postItemConC {
						.postItemConCV {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							font-weight: 400;
							font-size: 26rpx;
							color: #666;
						}
					}
					.postItemImg {
						padding-top: 16rpx;
						width: 100%;
						overflow: hidden;
						.postItemImgD {
							flex: 0 0 22%;
							margin-right: 20rpx;
							width: 152rpx;
							height: 152rpx;
							overflow: hidden;
							border-radius: 10rpx;
							background: #6f7d8c;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
					.postItembot {
						justify-content: space-between;
						align-items: center;
						padding-top: 20rpx;
						.pIBL {
							align-items: center;
							.pIBL1 {
								padding: 8rpx 16rpx;
								background: #fff6ed;
								border-radius: 8rpx;
								font-size: 20rpx;
								color: #f39f4b;
							}
							.pIBL2 {
								margin-left: 20rpx;
								font-size: 20rpx;
								color: #bcbfc3;
							}
						}
						.pIBR {
							.pIBR1 {
								align-items: center;
								margin-right: 20rpx;
								.pIBR11 {
									margin-right: 10rpx;
									image {
										width: 32rpx;
										height: 32rpx;
									}
								}
								.pIBR12 {
									font-size: 24rpx;
									color: #000000;
								}
							}
							.pIBR2 {
								image {
									width: 32rpx;
									height: 32rpx;
								}
							}
						}
					}
				}
				.postItem:last-child {
					border-bottom: none;
				}
			}
			.noDatas {
				width: 100%;
				color: #999;
				text-align: center;
			}
			.noMoerData {
				width: 100%;
				color: #999;
				text-align: center;
			}
		}
	}
}
</style>
